<template>
  <div class="recommend">
    <scroll ref="scroll" class="scroll-dome" :data="discList">
      <div>
        <my-swiper :scroll="scroll" :swiperList='swiperList'></my-swiper>
        <div class="title">热门歌单推荐</div>
        <disc-list :discList='discList'></disc-list>
        <div class="load-content">
          <lodaing v-if="!discList.length"></lodaing>
        </div>
      </div>
    </scroll>
  </div>
</template>

<script>
import {getRecomment, getDissList} from '../../api/recommend'
import {ERR_OK} from '../../api/config'
import mySwiper from '../swiper/swiper'
import discList from '../disc-list/disc-list'
import Scroll from '../../base/scroll/scroll'
import Lodaing from '../../base/loading/loading'

export default {
  data () {
    return {
      swiperList: [],
      discList: [],
      scroll: null
    }
  },
  mounted() {
    this._getRecomment()
    this._getDissList()
    this.scroll = this.$refs.scroll
  },
  methods: {
    _getRecomment() {
      getRecomment().then((res) => {
        if (res.code === ERR_OK) {
          this.swiperList = res.data.slider
        }
      })
    },
    _getDissList() {
      getDissList().then((res) => {
        if (res.code === ERR_OK) {
          this.discList = res.data.list
        }
      })
    }
  },
  components: {
    mySwiper,
    discList,
    Scroll,
    Lodaing
  }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/styles/variable"
  .recommend{
    position: fixed
    width: 100%
    top: 44px
    bottom: 0
    .scroll-dome{
      height 100%;
      overflow hidden;
    }
    .title {
      width 100%;
      height 40px;
      line-height 40px;
      text-align center
      color $color-theme
      font-size $font-size-medium
    }
    .load-content{
      width: 100%
      margin-top 30%
      transform: translateY(-50%)
    }
  }
</style>
